<template>
  <div>
    <el-row type="flex">
      <el-col span="18">
        <el-calendar
          v-model="calendar"
          class="col-calendar"
          style="border: 4px solid #5496e0"
        >
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{  data }">
            <p style="text-align: center">
              <!--这里原本有动态绑定的class，去掉-->
              {{ data.day.split("-").slice(2, 5).join("-") }}<br /><br />
              <!-- 传对应的时间返回内容。。。。。。。。。。。。 -->
              {{ dealMyDate(data.day) }}
              <!-- <el-input ref="userNameInput" v-else v-model="input"  placeholder="请输入内容"></el-input> -->
            </p>
          </template>
        </el-calendar>
      </el-col>

      <el-col span="6">
        <div class="col-card">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span> {{ getOv(calendar) }}</span>
              <el-button
                style="float: right"
                size="mini"
                round
                @click="onEdit"
                v-if="flage"
                >编辑</el-button
              >
              <el-button
                style="float: right"
                size="mini"
                round
                @click="onSure"
                v-else
                >确定</el-button
              >
            </div>
            <div>
              <div v-if="flage" class="text-span-bz">
                备注:
                {{ dealMyDate(this.getOv(calendar)) }}
              </div>

              <el-input
                v-else
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                maxlength="30"
                show-word-limit
              />
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
//:ecData 传参
//@ecClick(当前,全部) 接参
export default {
  props: {
    ecData: {
      type: Array,
      default: [
        { date: "2022-10-20", content: "春风1", key: "1" },
        { date: "2022-10-26", content: "春风2", key: "2" },
        { date: "2022-10-26", content: "春风3", key: "3" },
      ],
    },
  },
  data() {
    return {
      attr: "",
      flage: true,
      newList: "",
      textarea: "",
      calendar: new Date(),
      resDate: [
        { date: "2022-10-20", content: "春风1", key: "1" },
        { date: "2022-10-26", content: "春风2", key: "2" },
        { date: "2022-10-26", content: "春风3", key: "3" },
      ],
    };
  },
  methods: {
    //确定
    onSure() {
      console.log(this.getOv(this.calendar));
      // let objData = [];
      for (let i = 0; i < this.resDate.length; i++) {
        if (
          this.resDate[i].content == this.dealMyDate(this.getOv(this.calendar))
        ) {
          this.resDate[i].content = this.textarea;

          this.$emit("ecClick", this.resDate[i],this.resDate);
        }
      }
      this.flage = true;
    },
    //编辑
    onEdit() {
      this.flage = false;
      this.textarea = this.dealMyDate(this.getOv(this.calendar));
      //判断数组中是否存在该对象  不存在则push一组
      if (this.dealMyDate(this.attr) == "") {
        console.log(this.newList);
        this.resDate.push({
          date: this.newList,
          content: this.textarea,
        });
      }
    },
    //获取对应content
    dealMyDate(v) {
      let len = this.resDate.length;
      let res = "";
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].date == v) {
          res = this.resDate[i].content;
          break;
        }
      }
      return res;
    },
    // 日期格式化 2000-05-12
    getOv(a) {
      return (
        a.getFullYear() +
        "-" +
        (parseInt(a.getMonth() + 1) < 10
          ? "0" + parseInt(a.getMonth() + 1)
          : parseInt(a.getMonth() + 1)) +
        "-" +
        (a.getDate() < 10 ? "0" + a.getDate() : a.getDate())
      );
    },
  },
  mounted() {},
  watch: {
    //监听点击日期
    calendar(a, b) {
      console.log(a, b);
      this.attr = this.dealMyDate(this.getOv(a));
      //
      this.newList = this.getOv(a);
      this.flage = true;
    },

    ecData: {
      handler(val) {
        console.log(val);
        this.resDate = this.ecData; //数据
      },
      deep: true,
    },
  },
};
</script>
<style>
.col-card {
  background-color: #5496e0;
  height: 99.2%;
  padding-top: 5px;
}

</style>
